<template>
  <div class="doc_11">
    <h2 id="doc_11_1">1. 矢量图形</h2>
    <p>可以制作多种多样的矩形矢量图形；</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559293864741-2f4c21f4-9a64-4d03-a908-63a9cb04f0a7.png?x-oss-process=image/resize,w_994" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_11_2">2. 图片遮罩</h2>
    <p>待更新；</p>
    <p>这实际上是一个动画，但是截不了gif图，请用户自行品尝；</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559294696849-9fae80a8-23a6-438d-b5c8-f0aba253c9f1.png" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_11_3">3. 随意绘图画板</h2>
    <p>在页面中加入这个组件，在移动端可以随意绘制任意图形，如有相关需求可扩展。</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559645327606-d1fd5aa5-5ce2-44e7-a490-06bcd328af7e.png" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_11_4">4. 雪碧图（逐帧）动画</h2>
    <p>如图雪碧图动画的配置界面，逐帧动画是将一张雪碧图按照动画的宽高及这张雪碧图中有多少张动画等参数来配置的，雪碧图动画还可以配置多动作动画，通过帧名来播放动画，默认是播放动画帧的第一帧动画。</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559629190482-a64d822a-f395-4dd9-84e3-2b8158d49aed.png?x-oss-process=image/resize,w_516" alt="">
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559629213807-950a7ac9-8e7c-481b-89b1-9064c04069a5.png?x-oss-process=image/resize,w_472" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_11_5">5. 位图文本</h2>
    <p>下图是位图文本的属性配置，除了需要做一个位图文本的雪碧图图片外，还需要每个文字的数据，数据一般都是从软件中直接导出的（如animate cc），还有就是动画帧（每个文字数据）。</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559636712257-ae1fe012-0cee-4cb7-bcc6-ac70b5de2bef.png?x-oss-process=image/resize,w_476" alt="">
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559636743063-6a8eb28a-6a0e-4e08-a38c-d4d9677ce42d.png?x-oss-process=image/resize,w_460" alt="">
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559637437579-2dddeb00-82fb-4517-846a-619d96fede62.png?x-oss-process=image/resize,w_460" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_11_6">6. 脚本嵌入动画</h2>
    <p>脚本嵌入动画目前只是展示了一头大象动画。如果建页中有比较复杂的动画且需求是矢量的，除了上面介绍的逐帧动画外（位图），还可以使用animate cc动画制作工具来生成脚本动画，嵌入到建页中。</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559643783063-19a55341-d42f-4557-a2ee-22962c0d0cf8.png" alt="">
      </span>
    </p>

    <h2 id="doc_11_7">7. 特效背景动画</h2>
    <p>这个动画可以制作一些动态背景，现在有3个demo，项目如有需求可以在增加。</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559644124155-117db43f-8e39-4138-be62-d5053a0faa43.png" alt="">
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559644194335-91af2fb6-3560-47a8-8ca5-4c913a642724.png?x-oss-process=image/resize,w_674" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_11_8">8. 字体图标</h2>
    <p>这些都是矢量字体图标，可以改变字体的颜色和字号等，点击图标可以改变。</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559719837815-6988499e-f770-434b-89ad-434a0d9efea7.png" alt="">
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559719882768-f7ac37a1-abea-493a-b353-cf04c26e1179.png" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_11_9">9. svg图标</h2>
    <p>下图是svg图标的编辑区域，主要是svg数据，svg数据可以从网上找到</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559722777072-89697c2d-fbe2-470c-b1fd-420c7b6e7023.png" alt="">
      </span>
    </p>
    <p></p>
    <p>如图可以找到svg数据（图标来自 <a href="https://www.iconfont.cn/collections/detail?cid=15329">https://www.iconfont.cn/collections/detail?cid=15329</a> ），AI中也可以导出svg数据。</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559722950918-0088a084-b489-468f-97f8-83aae7dab5f0.png?x-oss-process=image/resize,w_1434" alt="">
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559723299452-9bed6302-3d7c-4ad7-bfc2-65c49af835e3.png" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_11_10">10. 小视频展示</h2>
    <p>
      <span>
        <video muted src="https://static.hd.xxx.com/static/minisite/new_jy/doc/video/qianyan0.mp4" preload="auto" webkit-playsinline="webkit-playsinline" playsinline="playsinline" poster="https://vod.yuque.com/d6f75c7f728346729a8d2c50ed9d6927/covers/3f180c0908d94f9289485b1b78fe777b-00005.jpg?auth_key=1560330799-0-0-dd9c37b1bae85142627ff4d64e0996e7" controls="" controlslist="nodownload"></video>
      </span>
    </p>
    <p></p>
    <p>
      <span>
        <video muted src="https://static.hd.xxx.com/static/minisite/new_jy/doc/video/qianyan1.mp4" preload="auto" webkit-playsinline="webkit-playsinline" playsinline="playsinline" poster="https://vod.yuque.com/fe6e2519c9b044dda7cde4d905e37379/covers/5b58b7c0a76d4f7bba06f56a5ffaf48a-00005.jpg?auth_key=1560330799-0-0-d2cea33fee54126a1e26330dcf72b74e" controls="" controlslist="nodownload"></video>
      </span>
    </p>
    <p></p>
    <p>
      <span>
        <video muted src="https://static.hd.xxx.com/static/minisite/new_jy/doc/video/qianyan2.mp4" preload="auto" webkit-playsinline="webkit-playsinline" playsinline="playsinline" poster="https://cdn.nlark.com/yuque/0/2019/jpeg/356936/1560319303783-63783dcc-6eca-450b-ae89-3fc7feaa1ce7.jpeg" controls="" controlslist="nodownload"></video>
      </span>
    </p>
    <p></p>
  </div>
</template>

<script>
  import { submenuMixin } from '@/views/child/doc/data/submenu';
  export default {
    mixins: [submenuMixin],
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/doc.scss';
</style>
